<!--
 * @Description:
 * @Version: 3.0
 * @Author: Feng
 * @Date: 2022-07-14 14:15:06
 * @LastEditors: Feng
 * @LastEditTime: 2022-08-10 18:14:57
-->
<template>
    <el-dialog title="" :visible.sync="dialogVisible" width="700px" :center="true">
        <div slot="title">选择会员</div>
        <div class="dlog_body vs-p-l-30 vs-p-r-30">
            <el-table :data="data" height="400" @cell-click="handleDemand" :cell-class-name="tableCellClassName">
                <el-table-column prop="realname" label="姓名" min-width="100" show-overflow-tooltip> </el-table-column>
                <el-table-column prop="sex" label="性别">
                    <template slot-scope="scope">
                        {{ scope.row.gender == 0 ? '保密' : scope.row.gender == 1 ? '男' : scope.row.gender == 2 ? '女' : '条件限制' }}
                    </template>
                </el-table-column>
                <el-table-column prop="phone" label="手机号" width="120"> </el-table-column>
                <el-table-column prop="vip_name" label="会员等级" width="100"> </el-table-column>
                <el-table-column prop="store.title" label="所属门店" min-width="100" show-overflow-tooltip> </el-table-column>
                <el-table-column label="操作" width="50">
                    <template slot-scope="scope">
                        <span :class="demandIndex === scope.$index ? 'icon-xuanzhong' : 'icon-weixuanzhong'" class="iconfont vs-select-icon"></span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div slot="footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="determine">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
    export default {
        props: {
            isOneSelect: {
                type: Boolean,
                default: true,
            },
            value: {
                type: Boolean,
                default: false,
            },
            data: {
                type: Array,
                default() {
                    return [];
                },
            },
        },
        computed: {
            dialogVisible: {
                set(val) {
                    if (!val) this.demandIndex = '';
                    this.$emit('input', val);
                },
                get() {
                    return this.value;
                },
            },
        },
        data() {
            return {
                demandIndex: '',
            };
        },
        watch: {
            data(val) {
                if (val.length == 1 && this.isOneSelect) {
                    this.demandIndex = 0;
                    this.determine();
                }
            },
        },
        methods: {
            tableCellClassName({ row, column, rowIndex, columnIndex }) {
                //注意这里是解构
                //利用单元格的 className 的回调方法，给行列索引赋值
                row.index = rowIndex;
                column.index = columnIndex;
            },
            handleDemand(row, column, rowIndex, columnIndex) {
                this.demandIndex = row.index;
            },
            determine() {
                if (this.demandIndex === '') return this.$message.error('请选择用户');
                console.log(this.data[this.demandIndex]);
                this.$emit('affirm', this.data[this.demandIndex]);
                this.dialogVisible = false;
            },
        },
    };
</script>

<style></style>
